<template>
  <div>
    <div class="title">
      <el-row>
        <el-col :span="1" style="width: 50px;">
          <span style="color:#757575;">位置 : </span>
        </el-col>
        <el-col :span="20">
          <span class="hand">岗位字典值</span>
        </el-col>
      
      </el-row>
    </div>
    <div class="posttable">
      <el-row>
        <el-col style="margin-left: 20px;padding-right: 20px;">
          <el-row style="margin-bottom: 10px;margin-top: 20px;">
            <el-col :span="6" v-for="(item,index) in list" :key="index">
              <div class="box" v-if="item.name == '4' || item.name == '3' || item.name == '2'|| item.name == '1' || item.name == '0'">
                <el-row class="roletitle">
                  <el-col :span="11" :offset="1">
                    <p
                      v-if="item.name !== '4' && item.name !== '3' && item.name !== '2'&& item.name !== '1' && item.name !== '0'">
                      {{item.name}}</p>
                    
                    <span style="color:#FF1C1D;" v-if="item.name == '4'">
                      <i class="el-icon-star-on"></i>
                      <i class="el-icon-star-on"></i>
                      <i class="el-icon-star-on"></i>
                      <i class="el-icon-star-on"></i>
                    </span>
                    <span style="color:#2931FE;" v-if="item.name == '3'">
                      <i class="el-icon-star-on"></i>
                      <i class="el-icon-star-on"></i>
                      <i class="el-icon-star-on"></i>
                    </span>
                    <span style="color:#F727FF;" v-if="item.name == '2'">
                      <i class="el-icon-star-on"></i>
                      <i class="el-icon-star-on"></i>
                    </span>
                    <span style="color:#FFC027;" v-if="item.name == '1'">
                      <i class="el-icon-star-on"></i>
                    </span>
                    <span style="color:#04344a;" v-if="item.name == '0'">
                      <i class="el-icon-star-off"></i>
                    </span>
                  </el-col>
                
                </el-row>
                <el-row class="districtel">
                  <el-col class="bottom" v-for="(item1,index1) in item.dicPositionList" :key="index1">
                    <el-col :span="8" :offset="1" v-if="index1 == 0">
                      <div class="pic" style="background-color: #1198fc;">
                        <img src='../../../static/image/leader.png'>
                      </div>
                      主岗位
                    </el-col>
                    <el-col :span="14" v-if="index1 == 0">
                      <div class="block">
                        <el-slider
                          width=100%
                          v-model="item1.value"
                          range
                          :min="0"
                          :max="5"
                          :show-stops=false
                          @change="changemain(item1.id,item1.value)"
                          :marks="marks">
                        </el-slider>
                      </div>
                    </el-col>
                    <el-col :span="8" :offset="1" v-if="index1 == 1">
                      <div class="pic" style="background-color: #52be85;">
                        <img src='../../../static/image/leader.png'>
                      </div>
                      辅岗位
                    </el-col>
                    <el-col :span="14" v-if="index1 == 1">
                      <div class="block">
                        <el-slider
                          width=100%
                          v-model="item1.value"
                          range
                          :min="0"
                          :max="5"
                          :show-stops=false
                          @change="changesec(item1.id,item1.value)"
                          :marks="marks">
                        </el-slider>
                      </div>
                    </el-col>
                  </el-col>
                </el-row>
              </div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>
    <div class="box1"></div>
  </div>

</template>

<script>
  import axios from 'axios'
  export default {
    name: "DictionaryValue",
    data() {
      return {
        marks: {
          0: '0',
          1: '1',
          2: '2',
          3: '3',
          4: '4',
          5: '5'
        },
        list: []
      }
    },
    created() {
      this.getList()
    },
    methods: {
      getList() {
        axios.post(this.url + '/posdic/findAll').then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.list = res.data.data;
          }
        })
      },
      changemain(id, val) {
        axios.post(this.url + '/posdic/update', ({
          id: id,
          min: val[0],
          max: val[1]
        })).then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            if (res.data.message == 'fail') {
            
            } else if (res.data.message == 'success') {
              this.getList()
            }
          }
        })
      },
      changesec(id, val) {
        axios.post(this.url + '/posdic/update', ({
          id: id,
          min: val[0],
          max: val[1]
        })).then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            if (res.data.message == 'fail') {
      
            } else if (res.data.message == 'success') {
              this.getList()
            }
          }
        })
      },
    }
  }
</script>

<style scoped>
  .box1 {
    width: 100px;
    height: 15px;
    border-radius: 5px;
    
  }
  
  .title {
    background-color: #fff;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    padding-left: 20px;
    margin-top: 6px;
    margin-bottom: 6px;
  }
  
  .hand {
    color: #757575;
  }
  
  .posttable {
    min-height: 700px;
    background-color: #fff;
  }
  
  .district {
    min-height: 236px;
    background-color: #fff;
    margin-bottom: 10px;
  }
  
  .box {
    width: 95%;
    height: 164px;
    border: 1px solid #ececec;
    margin-bottom: 30px;
    border-radius: 10px;
  }
  
  .roletitle {
    padding-top: 20px;
  }
  
  .roletitle p {
    color: #333;
    font-weight: 700;
  }
  
  .pic {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
  }
  
  .pic img {
    margin-top: 4px;
  }
  
  .bottom {
    margin-bottom: 10px;
  }
  
  .districtel {
    margin-top: 20px;
    vertical-align: middle;
    color: #757575;
  }
  
  .districtel i {
    font-size: 26px;
  }
  
  .districtel span {
    font-size: 16px;
    position: relative;
    top: -4px;
  }
</style>
